<template>
    <div class="layout">

      <!--<el-button type="info" >登出</el-button>-->
      <!--<el-button type="primary">主要按钮</el-button>-->
        <Layout>
            <Header :style="{background:'#31424b',width:'100%'}">
                <Menu active-name="1">
                    <div class="layout-p">微博舆情监控平台</div>
                    <div :style="{position:'absolute',left:'1400px'}">
                    <el-Button round type="danger" @click="quit" :plain="true">注销</el-Button>
                </div>
                </Menu>
            </Header>
            <Layout>
                <Sider hide-trigger :style="{background: '#31424b',top:'0px'}">
                    <Menu active-name="1-1" theme="#33414f" width="auto" :open-names="['1']" >
                        <router-link to="/start">
                        <MenuItem name="4" class="p">
                          <Icon type="ios-paw">
                          </Icon>时间设置</MenuItem>
                        </router-link>
                        <Submenu name="1" class="p">
                            <template slot="title">
                              <Icon type="ios-people"></Icon>
                                数据列表
                            </template>
                            <router-link to="/weibo_list" class="p">
                                <MenuItem name="1-1">微博列表</MenuItem>
                            </router-link>
                            <router-link to="/user_list" class="p">
                                <MenuItem name="1-2">账号列表</MenuItem>
                            </router-link>

                        </Submenu>
                        <Submenu name="2" class="p">
                            <template slot="title">
                                <!--<Icon type="ios-keypad"></Icon>-->
                              <Icon type="ios-cloudy"></Icon>
                                词云展示
                            </template>
                            <router-link to="/day_cloud" class="p">
                                <MenuItem name="2-1">日词云</MenuItem>
                            </router-link>
                            <router-link to="/week_cloud" class="p">
                                <MenuItem name="2-2">词云</MenuItem>
                            </router-link>
                            <router-link to="/home1" class="p">
                                <MenuItem name="2-3">词云趋势</MenuItem>
                            </router-link>
                        </Submenu>
                        <Submenu name="3" class="p">
                            <template slot="title">
                              <Icon type="ios-flask"></Icon>
                                总排行榜
                            </template>
                            <router-link to="/influence" class="p">
                                <MenuItem name="3-1">用户影响力Top10</MenuItem>
                            </router-link>
                            <router-link to="/active" class="p">
                                <MenuItem name="3-2">用户活跃度Top10</MenuItem>
                            </router-link>
                            <router-link to="/attention" class="p">
                                <MenuItem name="3-3">微博关注度Top10</MenuItem>
                            </router-link>
                            <router-link to="/reply" class="p">
                                <MenuItem name="3-4">微博评论数Top10</MenuItem>
                            </router-link>
                            <router-link to="/forward" class="p">
                                <MenuItem name="3-5">微博转发数Top10</MenuItem>
                            </router-link>
                        </Submenu>
                    </Menu>
                </Sider>
                <Layout :style="{padding: '15px 15px 15px'}">

                    <Content :style="{padding: '24px', minHeight: '650px', background: '#ffffff'}">
                        <!-- 渲染组件 -->
                        <router-view></router-view>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    </div>
</template>
<script>
    export default {
        methods: {
            quit() {
                this.$router.push('/');
              this.$message('注销成功');
            }
        }
    }
</script>

<style scoped>
    .layout{
    border: 0px solid #d7dde4;
    background: #f5f7f9;
    position: fixed;
    border-radius: 10px;
    overflow: hidden;
    top: 0%;
    height: 100%;
    width: 100%;
}
.p{
    color: #ffffff;
    font-size: 16px;

}
.layout-p{
    width: 200px;
    height: 30px;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 0px;
    left: 10px;
    font-size: 20px;
    color: #ffffff;

}
.layout-nav{

    margin: 0 auto;
    margin-left: 600px;

}
</style>
